<template>
    <div class="report-warp">
        <!-- 表格START -->
        <div class="report-table" style="top:10px;">
            <div class="report-table-container" id="report-table-container" :style="gettableMinWidth()">
                <div class="report-thead" v-show="thead && thead.length>0">
                    <!-- 设置表头 -->
                    <Row type="flex" justify="space-around">
                        <div class="checkboxWarp" v-if="checkable || hasCheckbox">
                            <i :class="[checkable || hasCheckbox ? 'checkbox' : '', itemAllChecked ? 'checkbox-checked' : '', hasItemChecked && !itemAllChecked ? 'checkbox-part-checked' : '']"
                               @click="checkAll"></i>
                            <!-- <span v-if="serialNumber" class="index">序号</span> -->
                        </div>
                        <div class="checkboxWarp" v-for="(th, th_index) in thead" v-if="th.index" :style="th.width?'min-width:'+th.width:''">
                            <span class="index">{{th.displayName}}</span>
                        </div>
                        <Col :span="th.name=='auditLoupan'?2:1" v-for="(th, th_index) in thead" :key="th_index" :name="th.name"
                             class="report-flex-col" v-if="!th.index"  :style="{
                                'width' : th.width ? th.width + 'px':'auto'
                             }">
                            <div class="report-table-th">
                                <span class="column-title" :title="th.displayName">{{th.displayName}}</span>
                                <span class="paixubox" v-if="th.sortFlage">
                              <Icon type="android-arrow-dropup" class="arrowup" @click.native="paixuclick(th.name,'DESC')"/>
                              <Icon type="android-arrow-dropdown" class="arrowdown" @click.native="paixuclick(th.name,'ASC')"/>
                            </span>
                            </div>
                        </Col>
                    </Row>
                </div>

                <div class="report-tdata" v-if="tdata && tdata.length > 0">
                    <div class="report-row" v-for="(td, index) in tdata" :key="index" @click="clickRow($event, td, index)"
                         :class="{ 'active' : rowClickedIndex === index }">
                        <!-- 设置表格每行展示 -->
                        <Row type="flex" justify="space-around">
                            <div class="checkboxWarp" v-if="checkable || hasCheckbox">
                                <i :class="[checkable || hasCheckbox ? 'checkbox' : '', td.checked ? 'checkbox-checked' : '']"
                                   @click="checkItem($event, td)"></i>
                                <!-- <span v-if="serialNumber" class="index" v-else>{{1 + index}}</span> -->
                            </div>
                            <div class="checkboxWarp" :key="th_index" v-for="(th, th_index) in thead" v-if="th.index"
                                 :style="th.width?'min-width:'+th.width:''">
                                <span class="index">{{Number(pagerData.startRow)+index}}</span>
                            </div>
                            <Col :span="th.name=='auditLoupan'?2:1" v-for="(th, index_th) in thead" :key="index_th"
                                 class="report-flex-col" :class="th.position=='right'? 'positionRight' : ''" v-if="!th.index"  :style="{
                                'width' : th.width ? th.width + 'px':'auto'
                             }">
                                <div v-if="th.name=='auditArticles'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toView(td)" title="查看">查看</a>
                                    <!-- <a href="javascript:;" class="setvalid" @click.stop="toAudit(td)">审核</a> -->
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)" title="精编">精编</a>
                                    <a v-if="td.status=='下架'" href="javascript:;" class="setvalid" @click.stop="tobackUp(td)"
                                       title="上架">上架</a>
                                    <a v-if="td.status=='上架'" href="javascript:;" class="setvalid" @click.stop="tobackOut(td)"
                                       title="下架">下架</a>
                                    <span v-if="articlesMainPush" style="margin-top:-3px;">
                                    <a v-if="td.mainPush=='主推'" href="javascript:;" class="setvalid" @click.stop="mainOut(td)"
                                       title="取消主推">取消主推</a>
                                    <a v-if="td.mainPush=='取消主推'" href="javascript:;" class="setvalid" @click.stop="mainUp(td)"
                                       title="主推">主推</a>
                                </span>
                                </div>

                                <div v-if="th.name=='auditLoupan'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toView(td)">查看</a>
                                    <span v-if="viewEdit" style="margin-top:-3px;">
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)">精编</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="tobackUp(td)">
                                        {{td.buildingStatus==0?"上架":"下架"}}
                                    </a>
                                </span>
                                </div>
                                <!-- 400通话录音 -->
                                <div v-if="th.name=='recordFiles'" style="width: 100%;text-align: center;" :title="td[th.name]">
                                    <p v-if="td.recordFile=='无录音'">无录音</p>
                                    <audio v-else controls="controls" :src="td.recordFile">
                                        很抱歉，您的浏览器不支持播放标签!
                                    </audio>

                                </div>
                                <!-- 大V入口列表 -->
                                <div v-if="th.name=='bigVaction'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toView(td)" title="查看">查看</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)" title="编辑">编辑</a>
                                    <a v-if="td.status=='下架'" href="javascript:;" class="setvalid" @click.stop="tobackUp(td)"
                                       title="上架">上架</a>
                                    <a v-if="td.status=='上架'" href="javascript:;" class="setvalid" @click.stop="tobackOut(td)"
                                       title="下架">下架</a>
                                    <a v-if="td.status=='草稿'" href="javascript:;" class="setvalid" @click.stop="tobackdelect(td)"
                                       title="删除">删除</a>
                                </div>
                                <!-- 大V入口列表 -->
                                <div v-if="th.name=='articleMagnage'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toView(td)" title="查看">查看</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)" title="编辑">编辑</a>
                                    <a v-if="td.status=='下架'" href="javascript:;" class="setvalid" @click.stop="tobackUp(td)"
                                       title="上架">上架</a>
                                    <a v-if="td.status=='上架'" href="javascript:;" class="setvalid" @click.stop="tobackOut(td)"
                                       title="下架">下架</a>
                                    <a v-if="td.status=='草稿'" href="javascript:;" class="setvalid" @click.stop="tobackdelect(td)"
                                       title="删除">删除</a>
                                </div>
                                <!-- 角色管理 -->
                                <div v-if="th.name=='roleManage'" style="width: 100%;text-align: center;" class="report-flex-col_div"
                                     :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)" title="编辑">编辑</a>
                                    <a v-if="td.validate=='启用'" href="javascript:;" class="setvalid" @click.stop="tobackUp(td)"
                                       title="启用">禁用</a>
                                    <a v-if="td.validate=='禁用'" href="javascript:;" class="setvalid" @click.stop="tobackOut(td)"
                                       title="禁用">启用</a>
                                </div>
                                <!-- 用户管理 -->
                                <div v-if="th.name=='userManage'" style="width: 100%;text-align: center;" class="report-flex-col_div"
                                     :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)" title="编辑">编辑</a>
                                    <a v-if="td.validate=='启用'" href="javascript:;" class="setvalid" @click.stop="tobackUp(td)"
                                       title="启用">禁用</a>
                                    <a v-if="td.validate=='禁用'" href="javascript:;" class="setvalid" @click.stop="tobackOut(td)"
                                       title="禁用">启用</a>
                                </div>
                                <!-- call 入口列表 -->
                                <div v-if="th.name=='callaction'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toView(td)">查看</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)">跟进</a>
                                </div>
                                <div v-if="th.name=='action'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toView(td)">查看</a>
                                    <!-- <a href="javascript:;" class="setvalid" @click.stop="toAudit(td)">审核</a> -->
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="tobackUp(td)">
                                        {{td.buildingStatus==0?"上架":"下架"}}
                                    </a>
                                </div>
                                <div v-if="th.name=='apartment'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="commconBack(td,'view')">查看</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'edit')">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'del')">删除</a>
                                </div>
                                <div v-if="th.name=='author'" class="report-flex-col_div" :title="td[th.name]">
                                    <Button type="success" @click.stop="commconBack(td,'edit')">编辑</Button>
                                    <Button type="error" @click.stop="commconBack(td,'del')">删除</Button>
                                    <!-- <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'edit')">编辑</a> -->
                                    <!-- <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'del')">删除</a> -->
                                </div>
                                <div v-if="th.name=='link'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'edit')">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'caozuo')">
                                        {{td.status==1?"禁用":"启用"}}
                                    </a>
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'del')">删除</a>
                                </div>
                                <div v-if="th.name=='seoconfiguration'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'edit')">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'caozuo')">
                                        {{td.openStatus==1?"禁用":"启用"}}
                                    </a>
                                    <!-- <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'del')">删除</a> -->
                                </div>
                                <div v-if="th.name=='seoconfigurationform'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'edit')">编辑</a>
                                </div>
                                <!-- 订单管理 -->
                                <div v-if="th.name=='orderCheck'" style="width: 100%;text-align: center;" class="report-flex-col_div textcenter"
                                     :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)"
                                       title="查看">查看</a>
                                </div>
                                <!-- 置业管家 -->
                                <div v-if="th.name=='toBManage'" style="width: 100%;text-align: center;" class="report-flex-col_div textcenter"
                                     :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)"
                                       title="查看详情">查看详情</a>
                                </div>
                                <!-- 城市参数配置 -->
                                <div v-if="th.name=='cityParams'" style="width: 100%;text-align: center;" class="report-flex-col_div textcenter"
                                     :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="toCheck(td)"
                                       title="编辑">编辑</a>
                                </div>
                                <!-- 城市参数配置板块列表 -->
                                <div v-if="th.name=='plateParams'" style="width: 100%;text-align: center;" class="report-flex-col_div textcenter"
                                     :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="toEdit(td,'edit')"
                                       title="编辑">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="toEdit(td,'del')"
                                       title="删除">删除</a>
                                </div>
                                <!-- 订单审核 -->
                                <div v-if="th.name=='auditor'" style="width: 100%;text-align: center;" class="report-flex-col_div textcenter"
                                     :title="td[th.name]">
                                    <a href="javascript:;" v-if="td.status!='首付'" class="setvalid" @click.stop="toCheck(td)"
                                       :title="td.auditStatus=='未审核'?'审核':'查看'">{{td.auditStatus=='未审核'?'审核':'查看'}}</a>
                                    <a href="javascript:;" v-if="td.status=='首付'" class="setvalid" @click.stop="toCheck(td)"
                                       :title="td.auditStatus=='未审核'?'审核':'查看'">{{td.auditStatus=='未审核'?'审核':'查看'}}</a>
                                </div>

                                <div v-if="th.name=='advertising'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'edit')">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'caozuo')">
                                        {{td.advertStatus==2?"启用":"禁用"}}
                                    </a>
                                    <!-- <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'del')">删除</a> -->
                                </div>
                                <!-- 主题管理 -->
                                <div v-if="th.name=='themesetting'" class="report-flex-col_div" :title="td[th.name]">
                                    <Button type="primary" href="javascript:;" class="setvalid" @click.stop="toCheck(td,'edit')">编辑</Button>
                                    <Button type="success" href="javascript:;" class="showdetail" @click.stop="tobackUp(td,'view')">
                                        {{td.status=== '禁用'?"启用":"禁用"}}
                                    </Button>
                                </div>

                                <!-- 主题管理 -->
                                <div v-if="th.name=='opensetting'" class="report-flex-col_div" :title="td[th.name]">
                                    <Button type="primary"  href="javascript:;" class="setvalid" @click.stop="toCheck(td,'edit')">编辑</Button>
                                    <Button type="success"  href="javascript:;" class="showdetail" @click.stop="tobackUp(td,'view')">
                                        {{td.status=== '禁用'?"启用":"禁用"}}
                                    </Button>
                                </div>

                                <!-- 主题管理 -->
                                <div v-if="th.name=='notifiseet'" class="report-flex-col_div" :title="td[th.name]">
                                    <Button type="primary" href="javascript:;" class="setvalid" @click.stop="toCheck(td,'edit')">编辑</Button>
                                    <Button type="success"  href="javascript:;" class="setvalid" @click.stop="toCopy(td,'copy')">复制</Button>
                                </div>
                                <div v-if="th.name=='notifiseetno'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="setvalid" @click.stop="toCopy(td,'copy')">复制</a>
                                </div>
                                <div v-if="th.name=='tuandui'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="commconBack(td,'view')">
                                        {{td.status==0?"启用":"禁用"}}
                                    </a>
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'edit')">
                                        {{td.huzeren=="是"?"":"设置为主负责人"}}</a>
                                </div>
                                <div v-if="th.name=='youhuiquan'" class="report-flex-col_div" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="commconBack(td,'view')">查看</a>
                                    <a href="javascript:;" class="showdetail" @click.stop="commconBack(td,'caozuo')">
                                        {{td.discountStatus==0?"上架":"下架"}}
                                    </a>
                                </div>
                                <div v-if="th.name=='location'" class="report-flex-col_div textcenter" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toCheck(td,'view')">编 辑</a>
                                </div>
                                <div v-if="th.name=='locationed'" class="report-flex-col_div textcenter" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toView(td,'view')">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="tobackUp(td,'caozuo')">
                                        {{td.status==0?"启用":"禁用"}}
                                    </a>
                                    <!-- <a href="javascript:;" class="showdetail" @click.stop="tobackdelect(td,'view')">删除</a> -->
                                </div>
                                <div v-if="th.name=='yongjin'" class="report-flex-col_div textcenter" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="commconBack(td,'edit')">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="commconBack(td,'caozuo')">
                                        {{td.status==0?"启用":"禁用"}}
                                    </a>
                                    <!-- <a href="javascript:;" class="showdetail" @click.stop="tobackdelect(td,'view')">删除</a> -->
                                </div>
                                <div v-if="th.name=='premises'" class="report-flex-col_div textcenter" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toCheck(td,'view')">编 辑</a>
                                </div>
                                <div v-if="th.name=='premisesed'" class="report-flex-col_div textcenter" :title="td[th.name]">
                                    <a href="javascript:;" class="showdetail" @click.stop="toView(td,'view')">编辑</a>
                                    <a href="javascript:;" class="setvalid" @click.stop="tobackUp(td,'caozuo')">
                                        {{td.status==0?"启用":"禁用"}}
                                    </a>
                                    <!-- <a href="javascript:;" class="showdetail" @click.stop="tobackdelect(td,'view')">删除</a> -->
                                </div>

                                <div v-if="th.displayName!='操作'" class="report-flex-col_div" :title="td[th.name]">
                                    <span v-if="th.name=='oriented'">{{td['oriented'] | towards }}</span>
                                    <span v-else-if="th.name == 'salesStatus'">{{td['salesStatus'] | saled}}</span>
                                    <span v-else-if="th.name == 'certificateType'">{{td['certificateType'] | certificated }}</span>
                                    <span v-else-if="th.name == 'authorPortrait'">

                                    <span v-if="td[th.name]==''||td[th.name]==null">无</span>
                                    <span v-else><img :src="td[th.name]" height="40px;"></span>
                                </span>
                                    <span v-else-if="th.name == 'roles'">
                                    <span v-if="td[th.name].length>0" v-for="(item,index) in td[th.name]">{{item.roleName}}&nbsp;</span>
                                    <span v-if="td[th.name].length==0"></span>
                                </span>
                                    <span v-else>{{ td[th.name] }}</span>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </div>
                <div v-if="tdata.length < 1" class="reportTablenodata">
                    <div class="alert">
                        <i></i> 暂无数据
                    </div>
                </div>
                <!-- 暂无数据 -->
                <div v-if="!loading && !initShow && tdata.length < 1" class="reportTablenodata">
                    <div class="report-nodata alert">
                        <i></i> 暂无数据
                    </div>
                </div>
            </div>
            <!-- 加载中START -->
            <div class="c-loadingwarp" v-if="loading">
                <div class="c-gridTableloading">
                    <div class="c-gridTableDemo-spin-col">
                        <Spin fix>
                            <Icon type="load-c" size="22" class="c-demo-spin-icon-load"></Icon>
                            <div>正在加载</div>
                        </Spin>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页START -->
        <div class="report-tfoot" v-if="isPageShow">
            <Row>
                <div class="clear"></div>
                <div class="totalCount">当前第 {{pagerData.current}}页当前第 {{pagerData.startRow}} 到第 {{pagerData.endRow}}
                    条，共 {{pagerData.total}} 条</div>
                <Page ref="refPager" :current="pagerData.current" :total="pagerData.total" :pageSize="pagerData.rows"
                      class="pager" show-sizer :pageSizeOpts="rowOptions" placement="top" show-elevator @on-change="pageChange"
                      @on-page-size-change="rowChange"></Page>
            </Row>
        </div>
        <!-- 分页END -->
        <Modal v-model="modal1" title="操作" @on-ok="queqing" @on-cancel="quxiao">
            <p>{{str}}</p>
        </Modal>

        <Modal v-model="tishi" width="350" title="提示" @on-ok="ok" @on-cancel="cancel">
            <p>确定删除吗？</p>
        </Modal>
    </div>
</template>
<script>
    import Vue from 'vue';
    ;
    import consts from '@/utils/consts';
    import Rest from '@/rest';
    import Api from '@/api';
    import Helper from '@/common/helper';
    //import Bus from '@/store/bus';

    export default {
        data() {
            return {
                hasItemChecked: false, // 是否部分选中
                itemAllChecked: false, // 是否全选
                checkedItemCount: 0, // 选中个数
                td: {},
                tishi: false,
                listProtected: [],
                allProtectedDay: 1,
                setData: {},
                modal1: false,
                str: '',
                msg: '',
                nodata: false,
                objValue: {},
                rowClickedIndex: null,
                thead: [],
                current: 1,
                rowOptions: [10, 15, 20, 30, 50], // 每页条数切换的配置
                articlesMainPush: false,
                viewEdit: false
            };
        },
        components: {},
        filters: {
            // 科学计数法
            toMoney: function(val, fix, reVal) {
                var that = this;
                fix = !isNaN(fix) ? fix : 2;
                if (val && val > 0) {
                    return Helper.moneyFormart(val, fix);
                } else if (val && val < 0) {
                    var data = Helper.moneyFormart(Math.abs(val), fix);
                    return '-' + data;
                } else {
                    return reVal ? ' ' : '0';
                }
            },
            checkDicName: function(value, field) {
                if (field == 'productName') {
                    var data = consts.runProduc;
                }
                if (field == 'activityPosition') {
                    var data = consts.runActivity;
                }
                if (field == 'isClick') {
                    var data = consts.isshared;
                }
                if (field == 'status') {
                    var data = consts.runState;
                }
                value = $.trim(value);
                if (value != '' && data != undefined && data != '') {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i]['Id'] == value) {
                            return data[i]['name'];
                        }
                    }
                }
                return value == 0 ? '' : value;
            },
            // 根据返回的数字类型，显示对应的朝向
            towards: function(value) {
                if (value == 1) {
                    return '正南'
                } else if (value == 2) {
                    return '正北'
                } else if (value == 3) {
                    return '正东'
                } else if (value == 4) {
                    return '正西'
                } else if (value == 5) {
                    return '东南'
                } else if (value == 6) {
                    return '西南'
                } else if (value == 7) {
                    return '东北'
                } else {
                    return '西北'
                }
            },
            // 销售状态
            saled: function(value) {
                if (value == 1) {
                    return '待售'
                } else if (value == 2) {
                    return '在售'
                } else {
                    return '售罄'
                }
            },
            certificated: function(value) {
                if (value == 1) {
                    return '预售许可证'
                } else {
                    return '出售许可证'
                }
            }
        },
        methods: {
            paixuclick(name, sort){
                this.$emit('sortEmit', name, sort);
            },
            init() {
                var that = this;
                that.itemAllChecked = false
                that.hasItemChecked = false
                that.thead = that.tableParmes.thead;
                // console.log(that.thead)
                this.getMainPush()
            },
            getMainPush() {
                var roles = JSON.parse(Helper.get('roles'));
                var rolesList = Helper.deepClone(consts.ROLESLIST);
                // console.log(roles)
                for (let i = 0; i < roles.length; i++) {
                    if (roles[i].roleId == 4) {
                        this.articlesMainPush = true
                    }
                    if (roles[i].roleId == 4 || roles[i].roleId == 5) {
                        this.viewEdit = true
                    }

                }

            },
            ok() {
                var that = this;
                Helper.globalLoading_show();
                var restApi =
                    Api.caseManage.params.case.delPayPlanByPayPlanId +
                    '/' +
                    that.td.payPlanId;
                Rest.delete(restApi).done(function(res) {
                    if (Helper.isSuccess(res)) {
                        that.$Message.success('删除成功!');
                        that.$emit('pageInit');
                    } else {
                        that.$Message.error(res.status.msg);
                    }
                    Helper.globalLoading_hide();
                });
            },
            cancel() {},
            // 选择复选框
            checkItem(e, item) {
                var allcheckedList = [];
                var checkedList = [];
                var uncheckedList = [];
                item.checked = !item.checked;
                this.updateCheckedStats();
                if (e) {
                    e.stopPropagation();
                }
                // this.tdata.forEach(item => {
                if (item.checked) checkedList.push(item);
                else uncheckedList.push(item)
                // });
                this.tdata.forEach(item => {
                    if (item.checked) allcheckedList.push(item);
                });
                this.$emit('selection-change', checkedList, uncheckedList, 'radios',allcheckedList);
            },
            // 全选
            checkAll(e) {
                var checkedList = [];
                var uncheckedList = [];
                if (this.itemAllChecked) {
                    // 已全选，取消全选
                    this.tdata.forEach(function(item) {
                        item.checked = false;
                    });
                } else {
                    // 未全选，全选
                    this.tdata.forEach(function(item) {
                        item.checked = true;
                    });
                }
                this.updateCheckedStats();
                if (e) {
                    e.stopPropagation();
                }
                this.tdata.forEach(item => {
                    if (item.checked) checkedList.push(item);
                    else uncheckedList.push(item)
                });
                this.$emit('selection-change', checkedList, uncheckedList, 'radios');
            },
            // 全部不选
            uncheckAll(e) {
                var checkedList = [];
                var uncheckedList = [];
                // 未全选，全选
                this.tdata.forEach(function(item) {
                    item.checked = false;
                });
                this.updateCheckedStats();
                if (e) {
                    e.stopPropagation();
                }
                this.tdata.forEach(item => {
                    if (item.checked) checkedList.push(item);
                    else uncheckedList.push(item)
                });
                this.$emit('selection-change', checkedList, uncheckedList, 'radios');
            },
            // 更新选中状态
            updateCheckedStats() {
                var _this = this;
                _this.checkedItemCount = 0;
                if (this.tdata && this.tdata.length > 0) {
                    this.itemAllChecked = this.tdata.every(item => item.checked);
                    this.hasItemChecked = this.tdata.some(item => item.checked);
                    this.tdata.forEach(item => {
                        if (item.checked) _this.checkedItemCount++;
                    });
                } else {
                    this.itemAllChecked = false;
                    this.hasItemChecked = false;
                    this.checkedItemCount = 0;
                }
                this.$forceUpdate();
            },
            commconBack(v, f) {
                this.$emit('tableBack', v, f);
            },
            // 查看
            toView(td) {
                var that = this;
                that.$emit('toView', td);
            },
            // 审核
            toAudit(td) {
                var that = this;
                that.$emit('toAudit', td);
            },
            // 编辑
            toCheck(td) {
                var that = this;
                that.$emit('toCheck', td);
            },
            //
            toEdit(td,type) {
                this.$emit('toEdit', td, type);
            },
            toZhutu(td) {
                var that = this;
                that.$emit('toZhutu', td);
            },

            // 拷贝
            toCopy(td) {
                var that = this;
                that.$emit('toCopy', td);
            },
            // 上架
            tobackUp(td) {
                var that = this;
                that.$emit('tobackUp', td);
            },
            // 下架
            tobackOut(td) {
                var that = this;
                that.$emit('tobackOut', td);
            },
            tobackdelect(td) {
                var that = this;
                that.$emit('tobackdelect', td);
            },
            // 主推
            mainUp(td) {
                var that = this;
                that.$emit('mainUp', td);
            },
            // 取消主推
            mainOut(td) {
                var that = this;
                that.$emit('mainOut', td);
            },
            queqing(id, status) {
                var that = this;
                Helper.globalLoading_show();
                var restApi = Api.operateset.operateInfo.isDisables;
                var stateParams = {
                    id: id,
                    status: status == 3 ? 2 : 3
                };
                Rest.put(restApi, stateParams).done(function(res) {
                    if (Helper.isSuccess(res)) {
                        that.$Message.success('更改成功！');
                        that.$emit('pageInit');
                    } else {
                        that.$Message.error(res.status.msg);
                    }
                    Helper.globalLoading_hide();
                });
            },
            quxiao() {
                this.modal1 = false;
            },

            view(flage, v) {
                // 呼叫客户
                var that = this;
            },
            pageChange(page) {
                var that = this;
                that.pagerData.page = page;
                // console.log('page', page);
                that.$emit('updataList', that.pagerData);
            },
            rowChange(rows) {
                var that = this;
                that.pagerData.rows = rows;
                that.pagerData.page = 1;
                // console.log('rows', rows);
                this.$emit('updataList', that.pagerData);
            },
            // 点击行
            clickRow(e, rowData, index) {
                var that = this;
                that.$emit('clickRow', rowData);
                // var query = {};
                // if (index >= 0) {
                //     query.flage = 'view';
                //     query.id = rowData.id;
                // } else {
                //     query.flage = 'add';
                // }
                // this.$router.push({path: 'call_formpage',query:query});
            },

            gettableMinWidth() {
                var that = this;
                if (that.tableParmes.tableMinWidth) {
                    return 'min-width:' + that.tableParmes.tableMinWidth;
                } else {
                    var thlen = that.tableParmes.thead.length;
                    var width = 0;
                    var minwidth = 900;
                    for (var i = 0; i < thlen; i++) {
                        width += 90;
                    }
                    if (minwidth >= width) {
                        width = minwidth;
                    }
                    return 'min-width:' + (width * 1 + 900) + 'px';
                }
            },
            getTableBottom() {
                var that = this;
                if (that.pagerData.isPage) {
                    // return 'bottom:' + '58px';
                } else {
                    // return 'bottom:' + '-40px';
                    // return 'bottom:' + '58px';
                }
            }
        },
        created() {
            this.loading = false;
            this.init();
        },
        computed: {},
        props: {
            isPageShow: {
                type: Boolean,
                default: true
            },
            tableParmes: {
                type: Object,
                default: function() {
                    return {
                        thead: [],
                        tableMinWidth: ''
                    };
                }
            },
            tdata: {
                type: Array,
                default: []
            },
            modalTbale: {
                type: Boolean,
                default: false
            },
            pagerData: {
                type: Object
            },
            loading: {
                type: Boolean,
                default: false
            },
            initShow: {
                type: Boolean,
                default: true
            },
            checkable: {
                // 每一列是否可选
                type: Boolean,
                default: ''
            },
            hasCheckbox: {
                // 是否展示多选框
                type: Boolean,
                default: false
            },
            hasAllcheck: {
                // 是否有全选
                type: Boolean,
                default: false
            },
            serialNumber: {
                // 是否展示序号
                type: Boolean,
                default: false
            }
        }
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/sass/install";
    .positionRight {
        
    }
    .textcenter {
        width: 100%;
        text-align: center;
    }

    .formList {
        width: 100%;
        margin-top: 38px;
        border: none;
    }

    .protect {
        overflow: hidden;
    }

    .protect div {
        float: left;
        height: 34px;
        line-height: 34px;
        font-size: 15px;
        color: #86888a;
    }

    .protect input {
        float: left;
        width: 310px;
        text-align: center;
    }

    .table table {
        width: 100%;
        margin-top: 28px;
        font-size: 14px;
        border-collapse: collapse;
    }

    .formList table th {
        color: #0e0e0e;
        vertical-align: middle;
    }

    .formList table th {
        font-size: 15px;
    }

    .formList table td,
    .formList table th {
        padding: 10px 15px;
        border: 1px solid #dddfe2;
    }

    .formList table tr:nth-child(even) {
        background-color: #fff;
    }

    .formList table td {
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .formList table td,
    .formList table th {
        padding: 10px 15px;
        border: 1px solid #dddfe2;
    }

    .formList table input[type=text] {
        height: 26px;
        line-height: 26px;
        width: 50%;
        text-align: center;
        color: #8f9193;
        background: 0 0;
    }

    .titleTab {
        color: #5e5f5f;
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        width: 100%;
        float: left;
        width: 300px;
    }

    .titleTab div {
        float: left;
        height: 100%;
        width: 120px;
        text-align: center;
        cursor: pointer;
    }

    .titleTab div.active {
        color: #02b0f0;
        position: relative;
    }

    .paixubox {
        position: relative;
        display: inline-block;
        margin-top: 5px;
    }

    .arrowup,
    .arrowdown {
        display: block;
        font-size: 19px;
        font-weight: bold;
        height: 10px;
        width: 7px;
    }

    .report-warp {
        position: relative;
        height: 100%;
        width: 100%;

        .report-table {
            position: absolute;
            top: 0px;
            right: 0;
            left: 0;
            bottom: 0;
            border: 1px solid $thBorderColor;
            background: url(../../assets/images/grid-bg.png) repeat 0 0;
            @include overflowCss();
            overflow-x: auto;
            overflow-y: hidden;

            .report-table-container {
                background-color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0px;
                padding-top: 48px;

                /*min-width: 1020px;*/
                .checkboxWarp {
                    min-width: 100px;
                    text-align: left;
                    height: 40px;
                    line-height: 40px;
                    padding-left: 15px;
                    color: #8c8b8b;
            }
        }

            .report-thead {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding-right: 10px;

                &:after {
                    position: absolute;
                    right: 0;
                    top: 0;
                    content: '';
                    width: 10px;
                    height: 40px;
                    background-color: #f5f5f5;
                    border-bottom: 1px solid #ddd;
            }

            ;

                /*z-index: 1;*/
                &:hover {
                    .ivu-col {
                        .report-filter-container {
                            display: inline-block;
                    }
                }
            }

                .ivu-col {
                    height: 40px;
                    line-height: 40px;
                    background-color: $thBG;
                    border-bottom: 1px solid $thBorderColor;
                    text-align: center;
                    cursor: pointer;
                    padding-left: 13px;

                    &.last-child {
                        border-left: 1px solid $thBorderColor;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                }

                    .report-filter-container {
                        display: inline-block;
                        padding: 0 8px;
                }

                    .setting {
                        display: inline-block;
                        width: 21px;
                        height: 21px;
                }

                    .index {
                        color: #666666;
                        font-weight: bold;
                }

                    .report-table-th {
                        height: 100%;
                        position: relative;

                        .column-title {
                            display: inline-block;
                            vertical-align: top;
                            color: #666666;
                            font-weight: bold;
                            max-width: 100%;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                    }
                }
            }

                .report-flex-col {
                    flex-grow: 1;
            }

                .checkboxWarp {
                    background-color: #f5f5f5;
                    border-bottom: 1px solid #d5d5d5;
                    font-weight: bold;
                    color: #666666;
            }
        }

            .report-tdata {
                overflow-y: scroll;
                position: absolute;
                left: 0;
                right: 0;
                top: 40px;
                bottom: 60px;
                background: url(../../assets/images/grid-bg.png) repeat 0 0;
                background-size: 1px 41px;

                .report-row {
                    background-color: white;
                    border-bottom: 1px solid $tdBorderColor;
                    @include transition(500ms, background-color);
                    cursor: pointer;

                    &.active {
                        background-color: $tdBorderColor;
                }

                    &:last-child {
                        border-bottom: none;
                }

                    &:hover {
                        background-color: $tdBorderColor;
                }

                    .report-flex-col_hover {
                        color: #02b0f0;

                        .report-flex-col_div {
                            position: absolute;
                            display: flex;
                            cursor: pointer;
                            height: 40px;
                            align-items: center;
                            z-index: 999

                    }
                }

                    .tip_icon {
                        display: inline-block;
                        vertical-align: middle;
                        margin-top: 1px;
                        width: 18px;
                        height: 20px;
                        background: url(../../assets/images/icons.png) no-repeat -461px -1045px;
                }
            }

                .report-row_nocursor {
                    cursor: default;
            }

                .ivu-col {
                    height: 40px;
                    padding-left: 13px;
                    color: #8c8b8b;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;

                    span {
                        display: inline-block;
                        vertical-align: middle;
                        max-width: 100%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                }
            }

                .report-flex-col {
                    flex-grow: 1;
                    overflow: hidden;

                    .report-flex-col_div {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin: auto;
                }
            }

                @include overflowCss();
        }

            .reportTablenodata {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                color: #8f8f8f;

                .alert {
                    text-align: center;
                    position: absolute;
                    width: 240px;
                    left: 50%;
                    top: 50%;
                    margin-left: -10px;
                    margin-top: -50px;

                    i {
                        display: block;
                        width: 78px;
                        height: 90px;
                        border-radius: 50px;
                        margin: 0 auto;
                        background: url(../../assets/images/customer_icons.png) no-repeat -218px -490px;
                        margin-bottom: 5px;
                }
            }

                .report-nodata {
                    i {
                        background: url(../../assets/images/customer_icons.png) no-repeat -138px -492px;
                }
            }

                .modalAlert {
                    margin-left: -120px;
            }
        }
    }
    }

    .report-tfoot {
        width: 100%;
        position: absolute;
        left: 0;
        right: 20px;
        bottom: 10px;
        height: 49px;

        .ivu-row {
            border: 1px solid $thBorderColor;
            border-bottom: 0;
            padding: 8px 15px 4px 15px;
            background-color: #fff;
    }

        .clear {
            display: inline-block;
            height: 32px;
            line-height: 32px;
    }

        .totalCount {
            position: absolute;
            height: 32px;
            line-height: 32px;
            display: inline-block;
            vertical-align: top;
            color: #657180;
    }

        .pager {
            display: inline-block;
            vertical-align: top;
            position: absolute;
            right: 20px;
            background-color: #fff;
            padding-left: 50px;
    }
    }
</style>
